<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-list-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button style="display:none" class="down" lay-submit="" lay-filter="LAY-list-down">下载</button>
                    <button class="layui-btn search" lay-submit lay-filter="LAY-list-search">搜索</button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table id="LAY-list"  lay-filter="LAY-list"></table>
            <!-- 行内工具 -->
            <script type="text/html" id="LAY-list-toolbar">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-href="User/edit/id={{d.id}}">编辑</a>
                {{# if(d.status==1){ }}
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="enable">禁用</a>
                {{# }else{ }}
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disable">启用</a>
                {{# } }}
            </script>
            <!-- 头部工具栏 -->
            <script type="text/html" id="toolbar">
                <div class="layui-btn-group fl layui-btn-group-jy">
                    <a lay-event="export" href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-download-circle">&nbsp;导出</a>
                    <a lay-event="add" href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-add-circle-fine">&nbsp;添加</a>
                    <a  lay-event="enable" href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm hisi-page-btns layui-icon layui-icon-play">&nbsp;启用</a>
                    <a  lay-event="disable" href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm hisi-page-btns layui-icon layui-icon-pause">&nbsp;禁用</a>
                    <a  lay-event="del" href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm hisi-page-btns confirm layui-icon layui-icon-close red">&nbsp;删除</a>
                </div>
            </script>


        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'table', 'form','toolJ'], function () {
        var $ = layui.$
            , admin = layui.admin
            , view = layui.view
            , table = layui.table
            , toolJ = layui.toolJ
            , form = layui.form;
        form.render(null, 'LAY-list-form');
        //用户管理
        table.render({
            elem: '#LAY-list'
            ,url: '/index/user/getList'
            ,toolbar: '#toolbar'
            ,cellMinWidth:80
            ,cols: [[
                {type:'checkbox'}
                ,{field: 'id', title: 'ID'}
                ,{field: 'cn_name', title: '中文名'}
                ,{field: 'name', title: '用户名'}
                ,{field: 'role', title: '角色'}
                ,{field: 'statusStr', title: '状态'}
                ,{field: 'utime', title: '更新时间'}
                ,{title: '操作', align:'center', fixed: 'right', toolbar: '#LAY-list-toolbar'}
            ]]
            ,page: true
            ,limit: 10
            ,text:{none: '暂无相关数据!' }
        });
        //监听行内操作
        table.on('tool(LAY-list)', function(obj){
            var data = obj.data;
            switch (obj.event) {
                case 'disable':
                    toolJ.ajax({"data":{"id":data.id,"status":1},"url":"/index/user/disableOrEnable"});
                    $(".search").click();
                    break;
                case 'enable':
                    toolJ.ajax({"data":{"id":data.id,"status":2},"url":"/index/user/disableOrEnable"});
                    $(".search").click();
                    break;
            }
        });
        //监听头部工具栏 操作
        table.on('toolbar(LAY-list)', function (obj) {
            //选中的数据
            var checkStatus = table.checkStatus('LAY-list')
                , data = checkStatus.data;
            //event对应模板的
            switch (obj.event) {
                case 'del':
                    layer.alert('开发中');
                    break;
                case 'export':
                    $('.down').click();
                    break;
            }
        })

    });
</script>